<template>
  <div class="departments" v-loading="isloading">
    <!-- 最外层的卡片 -->
    <el-card class="card">
      <!-- tabs 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <div class="content">
            <!-- 完成顶部组织结构 -->
            <treetools :item="topTree"></treetools>
            <!-- 分割线 -->
            <hr />
            <!-- 组织结构的静态部分 -->
            <el-tree :data="resList" :props="defaultProps" default-expand-all>
              <template slot-scope="{ data }">
                <treetools
                  :item="data"
                  @refreshdata="getAllDepart"
                  @open-add="apenadd"
                  @open-edit="openedit"
                ></treetools>
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <adddepa
      :showDialog.sync="showDialog"
      :currentObj="currentObj"
      @refreshdata="getAllDepart"
      ref="myadd"
    ></adddepa>
  </div>
</template>

<script>
// 导入树操作栏组件
import treetools from './components/tree-tools.vue'
import { getDepartmentApi } from '../../api/department'
import { tranListToTreeData } from '../../utils/index'
// 导入组件
import adddepa from './components/add-depa.vue'
export default {
  name: 'departments',
  data () {
    return {
      activeName: 'first',
      // 顶部结构的数据源
      topTree: {
        manager: '负责人',
        isTop: true
      },
      // 设置数据源的结构
      defaultProps: {
        label: 'name'
      },
      // 数组结构数据源
      treeList: [],
      // 改变后的树状数据
      resList: [],
      showDialog: false,
      // 记录当前新增操作部门
      currentObj: {},
      isloading: false
    }
  },
  methods: {
    async getAllDepart () {
      this.isloading = true
      const res = await getDepartmentApi()
      // this.treeList = res.depts
      this.resList = tranListToTreeData(res.depts, '')
      this.topTree = { ...res.depts[0], ...this.topTree }
      this.isloading = false
    },
    // 打开编辑页面
    apenadd (item) {
      this.showDialog = true
      // 记录当前操作为谁而操作
      this.currentObj = item
    },
    // 打开查看面板
    openedit (item) {
      this.showDialog = true
      // 记录当前操作为谁而操作
      this.currentObj = item
      this.$refs.myadd.getDepartmentById(item.id)
    }
  },
  components: {
    treetools,
    adddepa
  },
  created () {
    this.getAllDepart()
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .card {
    padding: 20px 40px;
    .content {
      padding: 40px 80px;
    }
  }
}
</style>
